<template>
    <div>
        <p class="title">学生管理</p>

        <div style="padding: 10px 0">

            <el-input style="width: 200px" placeholder="按照学生学号查询" suffix-icon="el-icon-search" v-model="sid"></el-input>
            <el-input style="width: 200px" placeholder="按照学生姓名查询" suffix-icon="el-icon-search" v-model="name"></el-input>
            <el-input style="width: 200px" placeholder="按照学生院系查询" suffix-icon="el-icon-search" v-model="academy"></el-input>
            <!-- <el-input style="width: 200px"  placeholder="请输入手机号查询" suffix-icon="el-icon-search" class="ml-5" v-model="uphone"></el-input> -->
            <el-button class="ml-5" type="primary" @click="load">搜索</el-button>
        </div>
        <div style="margin: 10px 0">
            <el-button type="primary" @click="handeradd">新增 <i class="el-icon-circle-plus-outline"></i></el-button>
            <el-popconfirm class="ml-5" confirm-button-text='确定' cancel-button-text='我再想想' icon="el-icon-info"
                icon-color="red" title="你确定重置该学生密码吗？" @confirm="delBatch">
                <el-button type="danger" slot="reference">重置学生密码 <i class="el-icon-remove-outline"></i></el-button>
            </el-popconfirm>
            <a href="http://localhost:8088/user/export" target="_blank">
                <el-button type="warning" class="ml-5">导出 <i class="el-icon-top"></i></el-button>
            </a>

            <el-dropdown split-button type="success" class="ml-5">
                按学生学号顺序显示
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item v-model="ustatuss" @click.native="handbyNomal">正序</el-dropdown-item>
                    <el-dropdown-item v-model="ustatuss" @click.native="handbyunNomal">逆序</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>
        <el-table :data="tableData" border stripe :header-cell-class-name="'headerBg'"
            :header-cell-style="{ 'text-align': 'center' }" :cell-style="{ 'text-align': 'center' }"
            @selection-change="handleSelectionChange">
            <!-- 学生信息表格 -->
            <el-table-column type="selection" width="55">
            </el-table-column>
            <el-table-column prop="sid" label="学号" width="157">
            </el-table-column>
            <el-table-column prop="name" label="姓名" width="105">
            </el-table-column>
            <el-table-column prop="gender" label="性别" width="75">
            </el-table-column>
            <el-table-column prop="grade" label="年级" width="122">
            </el-table-column>
            <el-table-column prop="academy" label="学院" width="200">
            </el-table-column>
            <el-table-column prop="major" label="专业" width="173">
            </el-table-column>
            <el-table-column prop="className" label="班级" width="135px">
            </el-table-column>
            <el-table-column label="处理操作" width="210">
                <template slot-scope="scope">
                    <el-button size="small" style="margin-right: 10px;" type="success"
                        @click="handerEdit(scope.row)">编辑</el-button>
                    <el-dropdown>
                        <el-button size="small" type="primary">
                            更多<i class="el-icon-arrow-down el-icon--right"></i>
                        </el-button>
                        <!-- <el-button type="primary" @click="kkk" slot="reference">更多 <i
                                    class="el-icon-arrow-down el-icon--right"></i></el-button> -->
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item @click.native="WhatIsTheInformation">查看该生信息</el-dropdown-item>
                            <el-dropdown-item @click.native="WhatIsTheCourse">查看该生课表</el-dropdown-item>
                            <el-dropdown-item @click.native="WhatIsTheGrade">查看该生成绩</el-dropdown-item>
                            <el-dropdown-item @click.native="del"> 删除</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                    <!-- </el-popconfirm> -->
                </template>
            </el-table-column>
        </el-table>
        <div style="padding: 10px 0">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNum"
                :page-sizes="[2, 5, 10, 20]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </div>
        <el-dialog title="添加学生信息" :visible.sync="dialogFormVisible" width="30%">
            <el-form label-width="100px" size="small">
                <el-form-item label="学生学号">
                    <el-input placeholder="例如：2020201234" v-model="form.sid" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="学生姓名">
                    <el-input placeholder="例如：王小明" v-model="form.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="学生性别">
                    <el-select v-model="selectedValueGender" placeholder="请选择" style='width:100%;'
                        @change="selectedValueBygender" :formatter="stateFormatGender" clearable="" filterable>
                        <el-option value="男">
                            男
                        </el-option>
                        <el-option value="女">
                            女
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="学生年级">
                    <el-select @change="selectedValueByGraderrr" v-model="form.selectedValueByGrade" filterable
                        placeholder="请选择">
                        <el-option v-for="item in gradeOptions" :key="item.value" :label="item.label"
                            :value="{ value: item.value, label: item.label }">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="学生院系">
                    <el-select @change="selectedValueByGrade" v-model="form.selectedValueAcademy" filterable
                        placeholder="请选择">
                        <el-option v-for="item in currOptions" :key="item.value" :label="item.label"
                            :value="{ value: item.value, label: item.label }">
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="学生专业">
                    <el-input placeholder="例如：人工智能科学" v-model="form.major" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="学生班级">
                    <el-input placeholder="例如：软件02班" v-model="form.className" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="save">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
export default {
    name: "User",
    data() {
        return {
            selectedValueGender: "",
            selectedValue: "",
            flag: false,
            tableData: [{
                sid: "2020204712",
                name: "王庆锴",
                gender: "男",
                grade: "大四",
                academy: "计算机科学技术学院",
                major: "软件工程",
                className: "软件J01班",
            }, {
                sid: "20202047125",
                name: "x",
                gender: "x",
                grade: "大二",
                academy: "计算机科学技术学院",
                major: "软件工程",
                className: "软件J01班",
            }],
            total: 0,
            pageNum: 1,
            pageSize: 5,
            sid: "2020204712",
            name: "王庆锴",
            gender: "",
            grade: "",
            academy: "计算机科学技术学院",
            major: "软件工程",
            className: "软件J01班",
            form: {
                sid: "2020204712",
                name: "王庆锴",
                gender: "",
                grade: "",
                academy: "",
                major: "软件工程",
                className: "软件J01班",
                selectedValueAcademy: "",
                selectedValueGrade: "",
            },
            // 年级序列
            gradeOptions: [{ value: 'grade00', label: '大一' }, { value: 'grade10', label: '大二' }, { value: 'grade11', label: '大三' }, { value: 'grade01', label: '大四' }],
            // 学院序列
            currOptions: [{
                value: '选项1',
                label: '数学与统计学院'
            }, {
                value: '选项2',
                label: '物理科学学院'
            }, {
                value: '选项3',
                label: '化学化工学院'
            }, {
                value: '选项4',
                label: '生命科学学院'
            },
            {
                value: '选项6',
                label: '计算机科学技术学院'
            },
            {
                value: '选项7',
                label: '环境科学与工程学院'
            },
            {
                value: '选项8',
                label: '纺织服装学院'
            },
            {
                value: '选项9',
                label: '历史学院'
            },
            {
                value: '选项10',
                label: '师范学院、教师教育学院'
            },
            {
                value: '选项11',
                label: '国际教育学院'
            },
            {
                value: '选项12',
                label: '马克思主义学院'
            },
            {
                value: '选项13',
                label: '法学院'
            },
            {
                value: '选项14',
                label: '经济学院'
            },
            {
                value: '选项5',
                label: '外语学院'
            },
            {
                value: '选项15',
                label: '音乐学院'
            },
            {
                value: '16',
                label: '医学部 '
            },
            ],
            dialogFormVisible: false,
            multipleSelection: [],
            pickerOptions: {
                shortcuts: [{
                    text: '今天',
                    onClick(picker) {
                        picker.$emit('pick', new Date());
                    }
                }, {
                    text: '昨天',
                    onClick(picker) {
                        const date = new Date();
                        date.setTime(date.getTime() - 3600 * 1000 * 24);
                        picker.$emit('pick', date);
                    }
                }, {
                    text: '一周前',
                    onClick(picker) {
                        const date = new Date();
                        date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', date);
                    }
                }]
            },
        }
    },
    WhatIsTheInformation(){
        alert('show')
        // this.$router.push('/views/StudentInfo')
    },
    WhatIsTheCourse(){
        console.log(111)
    },
    created() {
        this.load();
    },
    methods: {
        // 获取选择的年级
        selectedValueByGraderrr(data) {
            const { value, label } = data;
            this.form.selectedValueGrade = label;
            console.log('123' + this.form.selectedValueGrade + '12312')
        },
        // 获取选择的院系
        selectedValueByGrade(data) {
            const { value, label } = data;
            this.form.selectedValueAcademy = label;
            console.log('123' + this.form.selectedValueAcademy + '12312')

        },
        selectedValueBygender() {
            if (this.selectedValueGender === "男") {
                this.form.gender = "男"
            }
            else
                this.form.gender = "女"

        },

        selectedValueBy() {
            if (this.selectedValue === "正常") {
                this.form.ustatus = 0
            }
            else if (this.selectedValue === "注销") {
                this.form.ustatus = 2
            }
            else this.form.ustatus = 1
        },
        stateFormat(row) {
            if (row.ustatus === 0) {
                return '正常'
            }
            if (row.ustatus === 2) {
                return '注销'
            }
            else {
                return '禁用'
            }
        },
        stateFormatGender(row) {
            if (row.ugender === "男") {
                return '男'
            }
            else {
                return '女'
            }
        },
        load() {
            this.request.get("/user/page", {
                params: {
                    pageNum: this.pageNum,
                    pageSize: this.pageSize,
                    uname: this.uname,
                    umail: this.umail,
                    uphone: this.uphone,
                    uorder: this.uorder,
                    ustatuss: this.ustatuss
                }
            }).then(res => {
                console.log(res)
                this.tableData = res.records
                this.total = res.total
            })

        },
        handerDesc() {
            this.uorder = 1
            this.load()
        },
        handerAsc() {
            this.uorder = 0
            this.load()
        },
        save() {
            this.request.post("/user/insert", this.form).then(res => {
                if (res) {
                    this.$message.success("保存成功")
                    this.load()
                } else {
                    this.$message.error("保存失败")
                }
            })
        },
        handeradd() {
            this.dialogFormVisible = true
            this.form = {}
        },
        handerEdit(row) {
            this.form = row
            this.dialogFormVisible = true
        },
        del(id) {
            this.request.delete("/user/delete/" + id).then(res => {
                if (res) {
                    this.$message.success("删除成功")
                    this.dialogFormVisible = false
                    this.load()
                } else {
                    this.$message.error("删除失败")
                }
            })
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
            // console.log(val)
        },
        delBatch() {
            let uids = this.multipleSelection.map(v => v.uid)
            this.request.post("/user/del/batch", uids).then(res => {
                if (res) {
                    this.$message.success("批量删除成功")
                    this.load()
                } else {
                    this.$message.error("批量删除失败")
                }
            })
        },
        kkk() {
            console.log(222)
        },
        handleSizeChange(pageSize) {
            this.pageSize = pageSize
            this.load()
        },
        handleCurrentChange(pageNum) {
            this.pageNum = pageNum
            this.load()
        },
        exp() {
            window.open("localhost:8088/user/export")
        },
        importSuccess() {
            this.$message.success("导入成功")
            this.load()
        },
        handbyNomal() {
            this.ustatuss = 0
            this.load()
        },
        handbyunNomal() {
            this.ustatuss = 1
            this.load()
        },
        makebyNomal(id) {
            this.request.get("/user/unstatus/" + id).then(res => {
                if (res) {
                    this.$message.success("禁用成功")
                    this.dialogFormVisible = false
                    this.load()
                } else {
                    this.$message.error("已为禁用学生")
                }
            })
        },
        LetPass(id) {
            this.request.get("/user/Nstatus/" + id).then(res => {
                if (res) {
                    this.$message.success("操作成功")
                    this.dialogFormVisible = false
                    this.load()
                } else {
                    this.$message.error("操作失败")
                }
            })
        },
    }
}
</script>
<style>
.title {
    font-size: 18px;
    color: #303133;
    margin: 10px;
}

.el-dropdown {
    vertical-align: top;
}

.el-dropdown+.el-dropdown {
    margin-left: 15px;
}

.el-icon-arrow-down {
    font-size: 12px;
}

.headerBg {
    background-color: #eee !important;
}
</style>